<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宣传</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }


        .video,
        .image {
            width: 1518px;
            height: 100vh;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
    <div class="video_con">
        <img class="image none" src="" alt="">
        <video class="video none" src="" autoplay controls loop></video>
    </div>

</body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
    const url = "http://8.130.26.11:8002/SSEtest/orderpay"
    var source = new EventSource(url);

    // 连接一旦建立，就会触发 open 事件，可以在 onopen 属性定义回调函数

    source.onopen = function (event) {
        console.log("open");
    };

    // 客户端收到服务器发来的数据，就会触发 message 事件，可以在 onmessage 属性定义回调函数
    source.onmessage = async function (event) {
        console.log(event);
        const { type, url } = JSON.parse(event.data)
        console.log(type, url);
        if (type === 0) {
            $(".image").addClass('none')
            $(".video").removeClass('none')
            $(".video").get(0).setAttribute("src", url)

        }
        else {
            $(".video").addClass('none')
            $(".image").removeClass('none')
            if ($(".video").pause) {
                $(".video").pause();
            }
            $(".image").get(0).setAttribute("src", url)
        }
    };

    // 如果发生通信错误（比如连接中断），就会触发 error 事件，可以在 onerror 属性定义回调函数
    source.onerror = function (event) {
        // handle error event
        console.log(event);
    };

</script>

</html>